<template>
  <a-table
    :data-source="data1"
    bordered
    class="ant-table-striped"
    :row-class-name="
      (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
    "
  >
    <a-table-column key="name" title="项目名称">
      <template #default="{ text: e }">
        <span
          style="display: flex; justify-content: center; align-items: center"
        >
          <StarOutlined
            @click="
              () => {
                e.star = !e.star;
              }
            "
            v-if="e.star"
          />
          <StarTwoTone
            v-else
            @click="
              () => {
                e.star = !e.star;
              }
            "
          />
          <span> {{ e.name }}</span>
        </span>
      </template></a-table-column
    >

    <a-table-column
      key="group"
      title="所属分组"
      data-index="group"
    /><a-table-column
      key="person"
      title="项目负责人"
      data-index="person"
    /><a-table-column
      key="custom"
      title="服务客户"
      data-index="custom"
    /><a-table-column
      key="projectPerson"
      title="项目成员"
      data-index="projectPerson"
    />
    <a-table-column key="status" title="项目状态">
      <template #default="{ text: e }">
        <span>
          <a-tag
            :color="
              e.status === '进行中'
                ? 'volcano'
                : e.status == '已延期'
                ? 'geekblue'
                : 'green'
            "
            >{{ e.status }}</a-tag
          >
        </span>
      </template> </a-table-column
    ><a-table-column
      key="startTime"
      title="项目开始时间"
      data-index="startTime"
    /><a-table-column key="endTime" title="项目结束时间" data-index="endTime" />
    <a-table-column
      key="createPerson"
      title="创建人"
      data-index="createPerson"
    /><a-table-column
      key="createTime"
      title="创建时间"
      data-index="createTime"
    />
  </a-table>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { StarTwoTone, StarOutlined } from "@ant-design/icons-vue";
import { useStore } from "../store/store";
export default defineComponent({
  name: "DataTable",
  props: {
    data1: {
      type: Array,
      required: true,
    },
  },
  components: {
    StarTwoTone,
    StarOutlined,
  },
  setup(props, context) {
    const columns = [
      {
        title: "项目名称",
        dataIndex: "name",
        align: "center",
      },
      {
        title: "所属分组",
        align: "center",
        dataIndex: "group",
      },
      {
        title: "项目负责人",
        align: "center",
        dataIndex: "person",
      },
      {
        title: "服务客户",
        dataIndex: "custom",
        align: "center",
      },
      {
        title: "项目成员",
        align: "center",
        dataIndex: "projectPerson",
      },
      {
        title: "项目状态",
        align: "center",
        dataIndex: "status",
      },
      {
        title: "项目开始时间",
        align: "center",
        dataIndex: "startTime",
      },
      {
        title: "项目结束时间",
        align: "center",
        dataIndex: "endTime",
      },
      {
        title: "创建人",
        align: "center",
        dataIndex: "createPerson",
      },
      {
        title: "创建时间",
        align: "center",
        dataIndex: "createTime",
      },
    ];
    const store = useStore();

    return {
      columns,
      StarTwoTone,
      StarOutlined,
    };
  },
});
</script>
